.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	border-top: 1px solid var(--bg-slate-400);
	border-bottom: 1px solid var(--bg-slate-400);

	padding: 0px 8px;
	gap: 8px;

	.rightActions {
		margin: 4px 0;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.timeRange {
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

@media screen and (width <= 1300px) {
	.toolbar {
		grid-template-columns: repeat(1, 1fr);

		.timeRange {
			justify-content: flex-end;
			padding-right: 0;
		}

		.rightActions {
			display: flex;
			justify-content: flex-end;
		}
	}
}

.lightMode {
	.toolbar {
		border-top: 1px solid var(--bg-vanilla-300);
		border-bottom: 1px solid var(--bg-vanilla-300);
	}
}
